<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            前端百宝箱
        </title>
        <style type="text/css">
            body { padding-top: 60px; padding-bottom: 20px; }
        </style>
        <link href="css/bootstrap.css" rel="stylesheet">
		<link href="js/google-code-prettify/prettify.css" rel="stylesheet">
		<link href="css/main.css" rel="stylesheet">
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
            </script>
        <![endif]-->
    </head>
    
    <body onload="prettyPrint()">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">前端百宝箱</a>
          <div class="btn-group pull-right">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
              <i class="icon-user"></i> 下拉导航
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="index.html">首页</a></li>
              <li class="divider"></li>
              <li><a href="html.html">HTML</a></li>
              <li class="divider"></li>
              <li><a href="css.html">CSS</a></li>
              <li class="divider"></li>
              <li><a href="javascript.html">JavaScript</a></li>
			   <li class="divider"></li>
			  <li><a href="tools.html">工具</a>
			   <li class="divider"></li>
			  <li><a href="resources.html">资源</a></li>
            </ul>
          </div>
          <div class="nav-collapse">
            <ul class="nav">
              <li><a href="index.html">首页</a></li>
              <li><a href="html.html">HTML</a></li>
              <li class="active"><a href="css.html">CSS</a></li>
              <li><a href="javascript.html">JavaScript</a></li>
			  <li><a href="tools.html">工具</a>
			  <li><a href="resources.html">资源</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
            </ul>
          </div>
			<!--<div class="well sidebar-nav">
				<ul class="nav nav-pills nav-stacked">
					<li class="active"><a href="#">首页</a></li>
					<li><a href="#">介绍</a></li>
					<li><a href="#">消息</a></li>
				</ul>
			</div>-->
        </div>
        <div class="span9">
			<!--section begin-->
			<section id="practice">
				<div class="well">
				<h2>CSS 编写技巧</h2>
				<p>积累优秀的 CSS 编写方法。</p>
				</div>
				<div class="row-fluid">
				  <h4 id="bs-hack">浏览器兼容的CSS Hack</h4>
				  <p>兼容 IE 6,7,8,9 和 Firefox,Chrome 的 hack 写法</p>
				  <style>
					.demo{
						width:300px;
						height:20px;
						background-color:blue\9;  /* ie8 */
						*background-color:yellow; /* ie7 */
						_background-color:black;  /* ie6 */
					}
					:root .demo{
						background-color:green;   /* ie9,ff,chrome */
					}
				  </style>
				  <p class="demo"></p>
<pre class="prettyprint lang-css linenums">
.demo{
	background-color:blue\9;  /* ie8 */
	*background-color:yellow; /* ie7 */
	_background-color:black;  /* ie6 */
}
:root .demo{
	background-color:green;   /* ie9,ff,chrome */
}
</pre>
				  <p>IE8 和 IE9 不需要区分的话还可以这样写</p>
<pre class="prettyprint lang-css linenums">
.demo{
	background-color:red;     /* ff,chrome */
	background-color:blue\9;  /* ie8,ie9 */
	*background-color:yellow; /* ie7 */
	_background-color:black;  /* ie6 */
}
</pre>
				</div>
				<div class="row-fluid">
				  <h4 id="clearfix">清除浮动的方法</h4>
				  <p>兼容各种浏览器的清除浮动方法</p>
				<pre class="prettyprint lang-css linenums">
/* clear element float */
.cf:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.cf { *zoom: 1; } /* for IE6 IE7 */

/* or using below method */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both; 
}
.cf {
    *zoom: 1; /* for IE6 IE7 */
}
</pre>
				</div>
				<div class="row-fluid">
				  <h4 id="progress">进度条显示</h4>
				  <p>类似点评网效果的进度<br/>
<div class="status">
<span class="progress" title="36%">
	<span class="bar"></span>
</span>
</div>
<style>
.status span{
	display:block;
}
.status .progress{
	width:100px;
	height:12px;
	background-color:#FFFBF6;
}
.status .bar{
	width:36%;
	height:12px;
	background-color:#F96;
}
</style>				  
				  </p>
				<pre class="prettyprint lang-html linenums cv">
<div class="status">
<span class="progress" title="36%">
	<span class="bar"></span>
</span>
</div>
<style>
.status span{
	display:block;
}
.status .progress{
	width:100px;
	height:12px;
	background-color:#FFFBF6;
}
.status .bar{
	width:36%;
	height:12px;
	background-color:#F96;
}
</style>
</pre>
				</div>
				<div class="row-fluid">
				  <h4 id="middle">垂直居中兼容方法</h4>
				  <p>DIV内容垂直居中的兼容实现方案。<br/>
<div class="wrap">
	<div class="hack">
		<div class="cnt">
			Content
		</div>
	</div>
</div>

<style>
.wrap{
	display:table;
	width:300px;
	height:50px;
	background-color:#aaa;
	*position:relative;
}
.hack{
	display:table-cell;
	vertical-align:middle;
	*position:absolute;
	*top:50%;
}
.cnt{
	*position:relative;
	*top:-50%;
}
</style>				  
				  </p>
				<pre class="prettyprint lang-html linenums cv">
<div class="wrap">
	<div class="hack">
		<div class="cnt">
			Content
		</div>
	</div>
</div>

<style>
.wrap{
	display:table;
	width:300px;
	height:50px;
	background-color:#aaa;
	*position:relative;
}
.hack{
	display:table-cell;
	vertical-align:middle;
	*position:absolute;
	*top:50%;
}
.cnt{
	*position:relative;
	*top:-50%;
}
</style>
</pre>
				</div>
			</section>
			<!--section end-->

				<div class="row-fluid">
				  <h4 id="tb-middle">垂直居中兼容方法（淘宝）</h4>
				  <p>淘宝提供的DIV内容垂直居中的兼容实现方案。<br/>
<div class="box">
	<img src="http://pic.cnitblog.com/avatar/a36987.jpg?id=27111710"  alt="" />
</div>

<style type="text/css">
.box {
	display: table-cell;
	vertical-align:middle;
	width:200px;
	height:200px;
	text-align:center;
	/* hack for ie */
	*display: block;
	*font-size: 175px;
	/* end */
	border: 5px solid red;
}

.box img{
	vertical-align: middle; /* for lt ie7 */
}
</style>				  
				  </p>
				<pre class="prettyprint lang-html linenums cv">
<div class="box">
	<img src="http://pic.cnitblog.com/avatar/a36987.jpg?id=27111710"  alt="" />
</div>

<style type="text/css">
.box {
	display: table-cell;
	vertical-align:middle;
	width:200px;
	height:200px;
	text-align:center;
	/* hack for ie */
	*display: block;
	*font-size: 175px;
	/* end */
	border: 5px solid red;
}

.box img{
	vertical-align: middle; /* for lt ie7 */
}
</style>
</pre>
				</div>
			</section>
			<!--section end-->
        </div>
        </div>
		<hr>
		<footer>
			<p>
				Hongbo Li &copy; 2012 Powered by
				<a href="docs/bootstrap/index.html" target="_blank">
					Bootstrap
				</a>
			</p>
		</footer>
      </div><!--/row-->
        <script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/main.js"></script>
		<script src="js/google-code-prettify/prettify.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>
</html>
